<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>菜单树</title>
    
    <link rel="stylesheet" type="text/css" href="../../dist/css/hisui.lightblue.min.css"></link>
    <script type="text/javascript" src="../../dist/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../jquery-tag-demo.js"></script>
    <script type="text/javascript" src="../../dist/js/jquery.hisui.min.js"></script>
    <script type="text/javascript" src="../../dist/js/locale/hisui-lang-zh_CN.js"></script>	
    <script type="text/javascript" src="../mock-min.js"></script>
    <link rel="stylesheet" type="text/css" href="../demo.css">
    
    <script type="text/javascript">
        var HISUIStyleCode = 'lightblue';
    </script>
</head>

<body>
	<style>
		td {
			padding: 5px 0;
		}

		td.label {
			text-align: right;
			padding-right: 10px;
		}
	</style>
	<h2>菜单树</h2>
	<h3>说明:</h3>
	<span>基于tree组件实现的菜单树组件menutree</span>

	<h3>如：</h3>
	<div class="demo-exp-code entry-content">
		<div >
			<div style="width:250px;height:600px;float: left;">
				<div id="mm"></div>
			</div>
			<div style="width:250px;height:600px;float: left;">
				<div id="mm1"></div>
			</div>
			<div style="width:250px;height:600px;float: left;">
				<div id="mm2"></div>
			</div>
			<div style="width:250px;height:600px;float: left;">
				<div id="mm3"></div>
			</div>
			<div style="width:250px;height:600px;float: left;">
				<div id="mm4"></div>
			</div>
			<div style="clear:both;"></div>
		</div>
		

		<script type="text/javascript">
			var hasLevel4=false; //是否有更多层级菜单

			var myMenuData=[];
            for(var i=1;i<4;i++){
                var item={id:i+'',text:'一级菜单'+i,state:'open',iconCls:'icon-outInstc-mgr',children:[],attributes:{
					engText:'Level1 Menu '+i
				}}
                for (var j=1;j<(7-i);j++){
                    item.children.push({
                        id:i+'-'+j,
                        text:'二级菜单'+i+'-'+j,
						iconCls:'icon-outInstc-mgr',
                        state:'open',
                        attributes:{
                            url:'./layout-query.html',
                            count:(i==1&&j<=2)?j:0
							,engText:'Level2 Menu '+i+'-'+j,
                        }
                    })

                }
                myMenuData.push(item);
                
            }
			var myMenuData2=[];
            for(var i=1;i<4;i++){
                var item={id:i+'',text:'一级菜单'+i,state:'open',iconCls:'icon-outInstc-mgr',children:[],attributes:{
					engText:'Level1 Menu '+i
				}}
                for (var j=1;j<(7-i);j++){
					var item2={
                        id:i+'-'+j,
                        text:'二级菜单'+i+'-'+j,
                        state:'open',
						iconCls:'icon-outInstc-mgr',
                        attributes:{
                            url:'./layout-query.html',
                            count:(i==1&&j<=2)?j:0
							,engText:'Level2 Menu '+i+'-'+j,
                        }
                    }
					if (j==4||j==5) {
						item2.attributes.url='';
						item2.children=[];
						for(var k=1;k<4;k++) {
							var item3={
								id:i+'-'+j+'-'+k,
								text:'三级菜单'+i+'-'+j+'-'+k,
								state:'open',
								attributes:{
									url:'./layout-query.html',
									count:4
								}
							}

							if (hasLevel4 && (k==2 ||k==3)) { //四级菜单
								item3.attributes.url='';
								item3.children=[];
								for(var o=1;o<4;o++) {
									var item4={
										id:i+'-'+j+'-'+k+'-'+o,
										text:'四级菜单'+i+'-'+j+'-'+k+'-'+o,
										state:'open',
										attributes:{
											url:'./layout-query.html',
											count:4
										}
									}
									if (o==2 ||o==3) { //wu级菜单
										item4.attributes.url='';
										item4.children=[];
										for(var p=1;p<4;p++) {
											var item5={
												id:i+'-'+j+'-'+k+'-'+o+'-'+p,
												text:'五级菜单'+i+'-'+j+'-'+k+o+'-'+p,
												state:'open',
												attributes:{
													url:'./layout-query.html',
													count:4
												}
											}
											item4.children.push(item5)
										}
										

									}
									item3.children.push(item4)
								}
								

							}



							item2.children.push(item3)
						} 
						

					}

                    item.children.push(item2)

                }
                myMenuData2.push(item);
                
            }
            Mock.mock("getMenuData", function( options ){
                var obj=myMenuData
                return obj;

            })
            Mock.mock("getMenuData2", function( options ){
                var obj=myMenuData2
                return obj;

            })
		</script>
		<script type='text/javascript' class="use-prettyprint">
			$(function () {
				///根节点全展开（一般用于只有两级菜单的）  不可向左收缩
				$('#mm').menutree({
					url:'getMenuData',
					height:600,
					prompt:'检索菜单',
					rootCollapsible:false,
					collapsible:false
					,onMenuClick:function(node){
						$.messager.popover({msg:'您点击了菜单'+node.text,type:'info'})
					}
					,searchFields:'engText'

				})
				///根节点全展开（一般用于只有两级菜单的）  不可向左收缩
				$('#mm1').menutree({
					url:'getMenuData',
					height:600,
					prompt:'检索菜单',
					rootCollapsible:true,
					collapsible:false
					,onMenuClick:function(node){
						$.messager.popover({msg:'您点击了菜单'+node.text,type:'info'})
					}
					,searchable:false

				})
				/// 根节点全展开（一般用于只有两级菜单的）  可向左收缩 （炫彩默认给带上标题）
				$('#mm2').menutree({
					url:'getMenuData',
					height:600,
					prompt:'检索菜单',
					rootCollapsible:false,
					collapsible:true
					,onMenuClick:function(node){
						$.messager.popover({msg:'您点击了菜单'+node.text,type:'info'})
					}
					,searchFields:'engText'
				})

				///根节点不全展开（一般用于有3级等更多菜单的） 一般需要配置标题  不可向左收缩
				$('#mm3').menutree({
					url:'getMenuData2',
					title:'菜单',
					height:600,
					prompt:'检索菜单',
					rootCollapsible:true,
					collapsible:false
					,onMenuClick:function(node){
						$.messager.popover({msg:'您点击了菜单'+node.text,type:'info'})
					}
					,searchFields:'engText'
				})
				///根节点不全展开（一般用于有3级等更多菜单的） 一般需要配置标题  可向左收缩
				$('#mm4').menutree({
					url:'getMenuData2',
					title:'菜单',
					height:600,
					prompt:'检索菜单',
					rootCollapsible:true,
					collapsible:true
					,onMenuClick:function(node){
						$.messager.popover({msg:'您点击了菜单'+node.text,type:'info'})
					}
					,searchFields:'engText'
					,onPanelCollapse:function(width){
						$.messager.popover({msg:'您折叠了菜单树,宽度为'+width,type:'info'})
					},onPanelExpand:function(width){
						$.messager.popover({msg:'您展开了菜单树,宽度为'+width,type:'info'})
					}
				})
			})
		</script>
		
	</div>
	<div class="demo-exp-code entry-content">
		<table class="table">
			<tr class="protitle">
				<th>属性</th>
				<th>说明</th>
				<th>默认值</th>
				<th></th>
			</tr>
			<tr>
				<td>url</td>
				<td>获取远程数据的URL</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>collapsible</td>
				<td>是否可向左折叠</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>rootCollapsible</td>
				<td>根节点是否可折叠</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>fit</td>
				<td>自适应父容器大小</td>
				<td>false</td>
				<td></td>
			</tr>
			<tr>
				<td>width</td>
				<td>宽度</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>height</td>
				<td>高度</td>
				<td>'auto'</td>
				<td></td>
			</tr>
			<tr>
				<td>title</td>
				<td>标题</td>
				<td>''</td>
				<td>仅炫彩风格会显示</td>
			</tr>
			<tr>
				<td>onlyOneExpanded</td>
				<td>同级菜单是否只能展开一个</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>searchable</td>
				<td>是否显示搜索框</td>
				<td>true</td>
				<td></td>
			</tr>
			<tr>
				<td>searchFields</td>
				<td>除text字段外用于查询匹配的字段</td>
				<td>''</td>
				<td></td>
			</tr>
			<tr>
				<td>animate</td>
				<td>动画</td>
				<td>true</td>
				<td></td>
			</tr>

			
			<tr class="mthtitle">
				<th>方法名</th>
				<th>说明</th>
				<th>入参</th>
				<th>返回值</th>
			</tr>
			
			<tr>
				<td>selectById</td>
				<td>根据id字段选择节点</td>
				<td>id</td>
				<td></td>
			</tr>
			<tr class="evttitle">
				<th>事件名</th>
				<th>说明</th>
				<th>入参</th>
				<th>类型</th>
			</tr>
			<tr>
				<td>onMenuClick</td>
				<td>菜单点击事件</td>
				<td>node</td>
				<td>树的node节点对象</td>
			</tr>
			<tr>
				<td>onMenuGroupClick</td>
				<td>菜单组点击事件</td>
				<td>node</td>
				<td>树的node节点对象</td>
			</tr>
			<tr>
				<td>onPanelCollapse</td>
				<td>向左折叠事件</td>
				<td>width</td>
				<td>折叠后的宽度</td>
			</tr>
			<tr>
			<td>onPanelExpand</td>
				<td>向右展开事件</td>
				<td>width</td>
				<td>展开后的宽度</td>
			</tr>
		</table>
	</div>

	<prettyprint />
</body>

</html>